<template>
    <div :class="['title', isT2 ? 't2' : '']">
      <span class="sp1">{{ name.tname }}</span>
      <div v-if="name.china || name.sichuan">
        <el-button
          class="b1"
          :style="buttonStyle('china')"
          @click="changeBack('china')"
        >
          {{ name.china }}
        </el-button>
        <el-button
          class="b2"
          :style="buttonStyle('sichuan')"
          @click="changeBack('sichuan')"
        >
          {{ name.sichuan }}
        </el-button>
      </div>
      <div v-else></div>
    </div>
  </template>
  
  <script setup>
  import { ref, watch } from 'vue';
  import b1 from "@/assets/imgs/b1.png";
  import b2 from "@/assets/imgs/b2.png";
  
  // 定义 props
  const props = defineProps({
    name: {
      type: Object,
      default() {
        return {
          tname: "",
          china: "",
          sichuan: "",
        };
      },
    },
    isT2:{
      type: Boolean,
      default: false,
    }
  });
  
  // 创建响应式变量，存储当前激活的按钮
  const activeButton = ref('china');
  
  // 用于切换按钮状态的方法
  const changeBack = (region) => {
    activeButton.value = region;
  };
  
  // 用于动态返回按钮的样式
  const buttonStyle = (region) => {
    const isActive = activeButton.value === region;
    return {
      backgroundImage: `url(${isActive ? b2 : b1})`,
      backgroundSize: "100% 100%",
      backgroundPosition: "center",
      backgroundRepeat: "no-repeat",
      color: isActive ? "#00FFE5" : "#fff",
    };
  };
  
  // 监听 name 变化的副作用
  watch(
    () => props.name,
    (newVal) => {
    //   console.log(newVal);
    },
    { immediate: true }
  );
  </script>
  
  <style lang="scss" scoped>
  .title {
    display: flex;
    color: #fff;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    background: url("../../assets/imgs/no-compress/t1.png") no-repeat;
    &.t2{
      background: url("../../assets/imgs/electricity/t2.png") no-repeat;
    }
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 46px;
    div {
      display: flex;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center center;
      position: relative;
      top: 5px;
      button {
        font-size: 14px;
        margin: 0;
        background: none;
        color: #fff;
        padding: 3px 12px;
        // width: 57px;
        // height: 25px;
        border: none;
        margin-right: 2px;
        letter-spacing:1px;
      }
    }
    .sp1 {
      position: relative;
      top: 15px;
      margin-left: 45px;
      font-family: "阿里妈妈数黑体";
      font-size: 16px;
      transform: skewX(-9deg); /* 水平倾斜10度 */
    }
  }
  </style>
  